<template>
  <div class="team">
    <div class="title">
      <h3>专家团队</h3>
    </div>
    <div class="list">
      <div class="single">
        <div class="img">
          <img src="@/assets/images/img_team1.jpg"/>
        </div>
        <div class="intro">
          <h4>赵威</h4>
          <h5>擅长领域</h5>
          <p class="p1">知识产权维权案件、技术成果转让</p>
          <h5>介绍</h5>
          <p class="p2">具有很强的沟通技巧与独到的观点视角，为每一家企业每一个客户解答在知识产权保护道路上遇到的各种疑难问题，并帮助企业设计适合自己的知识产权保护计划，让品牌发挥其应有的力量。</p>
          <a @click="onSwt">立即咨询</a>
        </div>
      </div>
      <div class="single">
        <div class="img">
          <img src="@/assets/images/img_team2.jpg"/>
        </div>
        <div class="intro">
          <h4>孙臻</h4>
          <h5>擅长领域</h5>
          <p class="p1">专利代理、专利分析</p>
          <h5>介绍</h5>
          <p class="p2">资深专利分析师，执业多年，一直严格遵守律师职业道德和执业纪律，秉承诚信、谨慎、勤勉、搞笑的执业理念，为客户提供一站式的专利服务。</p>
          <a @click="onSwt">立即咨询</a>
        </div>
      </div>
      <div class="single">
        <div class="img">
          <img src="@/assets/images/img_team3.jpg"/>
        </div>
        <div class="intro">
          <h4>巩芳</h4>
          <h5>擅长领域</h5>
          <p class="p1">版权登记、版权授权转让、著作权案件代理</p>
          <h5>介绍</h5>
          <p class="p2">资深知识产权分析师，主要从事面向国内国际的版权代理工作。负责客户在中国大陆、香港、澳门、台湾及其他海外国家的授权及确权。</p>
          <a @click="onSwt">立即咨询</a>
        </div>
      </div>
      <div class="single">
        <div class="img">
          <img src="@/assets/images/img_team4.jpg"/>
        </div>
        <div class="intro">
          <h4>陈建国</h4>
          <h5>擅长领域</h5>
          <p class="p1">国内外商标注册、专利交易、技术成果转让</p>
          <h5>介绍</h5>
          <p class="p2">资深国际商标代理人，服务众多企业已在海外拿到商标证书，成功由中国制造走向中国创造。</p>
          <a @click="onSwt">立即咨询</a>
        </div>
      </div>
      <div class="single">
        <div class="img">
          <img src="@/assets/images/img_team5.jpg"/>
        </div>
        <div class="intro">
          <h4>李银银</h4>
          <h5>擅长领域</h5>
          <p class="p1">涉外版权案件代理、版权登记、版权授权转让</p>
          <h5>介绍</h5>
          <p class="p2">资深知识产权分析师，待人以诚，立世以信，法律专业知识扎实、办事认真负责、办理经验丰富，享有良好的声誉。</p>
          <a @click="onSwt">立即咨询</a>
        </div>
      </div>
      <div class="single">
        <div class="img">
          <img src="@/assets/images/img_team6.jpg"/>
        </div>
        <div class="intro">
          <h4>翟梦晴</h4>
          <h5>擅长领域</h5>
          <p class="p1">商标驳回复审、商标撤三复审、商标异议</p>
          <h5>介绍</h5>
          <p class="p2">资深检索分析师，在执业实践中善于思辨，面对各类商标纠纷案件，能够以独特的高度和视角条分缕析，精准把握，随机应变，出奇制胜，以倾力维护委托人之合法权益为最高标准。</p>
          <a @click="onSwt">立即咨询</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import apis from '@/api'

export default {
  name: 'SpecialList',
  methods: {
    onSwt () {
      window.open(apis.Swt)
    }
  }
}
</script>

<style scoped>
.title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 55px 0 20px 0;
}

.title h3 {
  font-weight: 700;
  font-size: 30px;
  color: #333;
}

.title a {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #333333;
}

.title a:hover {
  color: #f52930;
}

.title a i {
  margin-left: 5px;
  font-size: 17px;
  width: 17px;
  height: 17px;
  line-height: 17px;
  color: #e52e3a;
}

.team .list {
  display: flex;
  flex-flow: row wrap;
}

.team .list .single {
  width: 590px;
  background-color: #fafafa;
  margin: 0 10px 10px 0;
  box-sizing: border-box;
  display: flex;
}

.team .list .single:nth-child(2n) {
  margin-right: 0;
}

.team .list .single .img {
  width: 240px;
  height: 340px;
}

.team .list .single .img img {
  display: block;
  width: 100%;
  height: 100%;
}

.team .list .single .intro {
  width: 340px;
  padding: 40px 26px 0 30px;
  box-sizing: border-box;
  overflow: hidden;
}

.team .list .single .intro h4 {
  font-size: 30px;
  color: #333;
  position: relative;
}

.team .list .single .intro h4:before {
  position: absolute;
  content: '';
  left: 0;
  bottom: 0;
  width: 26px;
  height: 2px;
  background-color: #cccccc;
}

.team .list .single .intro h5 {
  font-size: 16px;
  margin-top: 20px;
  color: #333;
}

.team .list .single .intro p {
  margin-top: 10px;
  font-size: 14px;
  line-height: 18px;
  color: #999;
}

.team .list .single .intro .p1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team .list .single .intro .p2 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.team .list .single .intro a {
  display: block;
  width: 94px;
  padding-left: 10px;
  height: 26px;
  margin-top: 32px;
  font-size: 12px;
  line-height: 24px;
  color: #ffffff;
  background: #e52e3a url("../../../assets/images/bg_arrow.png") no-repeat right center;
  border: 1px solid #e52e3a;
}
</style>
